<template>
    <div style="height: 100%">
        <el-card>
            <div slot="header" class="clearfix">
                <span>企业性质统计图</span>
                <el-button style="float: right; padding: 3px 1px;font-size: 14px" @click="generate" type="text">生成图表
                </el-button>
                <el-button style="float: right; padding: 3px 1px;font-size: 14px" @click="exportImg" type="text">导出图片
                </el-button>
            </div>
            <div>
                <el-form :model="param" ref="form" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="时间类型：" prop="name">
                                <el-radio v-model="param.dateType" label="year">按年份</el-radio>
                                <el-radio v-model="param.dateType" label="month">按月份</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="param.dateType == 'year'">
                            <el-form-item label="时间：">
                                <el-date-picker
                                        v-model="startYear"
                                        type="year"
                                        value-format="yyyy"
                                        align="right"
                                        placeholder="选择开始年份">
                                </el-date-picker>
                                至
                                <el-date-picker
                                        v-model="endYear"
                                        type="year"
                                        value-format="yyyy"
                                        align="right"
                                        placeholder="选择结束年份">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="param.dateType == 'month'">
                            <el-form-item label="时间：">
                                <el-date-picker
                                        v-model="month"
                                        type="monthrange"
                                        align="right"
                                        unlink-panels
                                        value-format="yyyy-MM"
                                        range-separator="至"
                                        start-placeholder="开始月份"
                                        end-placeholder="结束月份"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="企业性质：">
                                <el-checkbox-group v-model="param.unitType">
                                    <el-checkbox v-for="unitType in unitTypeList" :label="unitType" :key="unitType">
                                        {{unitType}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <!--                <BarLabelRotationChart ref="chart" height="580px"-->
                <!--                                       width="100%"-->
                <!--                                       :legend="param.unitType"-->
                <!--                                       :xAxisData="xAxisData"-->
                <!--                                       :chartData="chartData"/>-->
                <PieChart ref="chart" height="900px" width="100%" :title="'企业性质统计图'" :fileName="'企业性质统计图.png'"/>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {getStorage} from "@/core/utils/storage";
    import PieChart from "@/components/Charts/PieChart.vue";
    import {errorMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {copy} from "@/core/utils/Utils";

    @Component({
        name: 'CompanyTypeChart',
        components: {PieChart},
    })
    export default class CompanyTypeChart extends mixins(BaseVue, Kit) {
        // 图表数据查询参数
        param: any = {
            dateType: 'year',
            unitType: []
        };
        // 年份选择
        startYear: string = "";
        endYear: string = "";
        // 月份选择
        month: any = [];
        // 图表副标题
        allCount: any = "";
        // 图表数据项
        legendList: any = [];
        // 图表数据
        chartData: any = {};
        // 企业性质数据
        unitTypeList: any = [];
        // 时间选择插件快捷选择按钮
        pickerOptions: any = {
            shortcuts: [{
                text: '今年至今',
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date(new Date().getFullYear(), 0);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近六个月',
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 6);
                    picker.$emit('pick', [start, end]);
                }
            }]
        };

        //初始化
        async mounted() {
            // 企业类型字典数据
            this.unitTypeList = getStorage("companyType");
            // 设置默认条件
            let myDate = new Date();
            let fullYear = myDate.getFullYear();
            this.startYear = fullYear.toString();
            this.endYear = fullYear.toString();
            for (let i in this.unitTypeList) {
                this.param.unitType.push(this.unitTypeList[i])
            }
            // 生成图标
            this.generate();
        }

        // 生成图表
        generate() {
            if (this.param.unitType.length == 0) {
                errorMsg("请选择企业性质");
                return;
            }
            if (this.param.dateType == 'year') {
                if (this.startYear && this.endYear) {
                    this.param.dateList = [this.startYear, this.endYear];
                } else {
                    this.param.dateList = [];
                }
            } else {
                if (this.month && this.month.length > 0) {
                    this.param.dateList = this.month;
                } else {
                    this.param.dateList = [];
                }
            }
            $http.post(API.companyUnitTypeStatistical, this.param).then((res: any) => {
                if (res.success) {
                    this.allCount = res.data.allCount;
                    this.legendList = copy(this.param.unitType);
                    this.chartData = copy(res.data.countObj);
                    (this.$refs.chart as any).changeChart(this.allCount, this.legendList, this.chartData, "companyType");
                }
            })
        }

        // 导出图片
        exportImg() {
            (this.$refs.chart as any).exportImg("企业性质统计图.png");
        }
    }


</script>

<style scoped lang="scss">

</style>
